<template>
	<view class="orderDetail">
		<u-sticky zIndex="-1" offset-top="0">
			<view class="top-bg"></view>
		</u-sticky>

		<view class="pl-3 pr-3 orderDetail-wrap">
			<view class="detail-info">
				<view class="mb-3 p-2 order-headr">
					<view class="flex justify-between align-center mb-1">
						<view class="title">
							单号
						</view>
						<view class="status">
							{{ orderHeader.Status }}
						</view>
					</view>
					<view class="flex justify-between align-center">
						<view class="order-id">
							{{ orderHeader.ID }}
						</view>
						<view class="flex align-baseline">
							<view>
								金额：
							</view>
							<u--text color="#e0584e" size="34rpx" bold mode="price" :text="orderHeader.Charge">
							</u--text>
						</view>
					</view>
				</view>
				<template v-for="(item, idx) in orderDetails">
					<template v-for="(sectionItem, sIdx) in item.Sections">
						<view class="p-2 mb-2 info-container" :class="`section_${item.TabName}_${sIdx}`"
							:key="`${idx}_${sIdx}`">
							<view v-if="sectionItem.Title" class="pb-1 mb-1 header">{{ sectionItem.Title }}</view>
							<template v-for="(infoItem, infoIdx) in sectionItem.Items">
								<view v-if="infoItem.Type == 'photo'" :key="`${idx}_${sIdx}_${infoIdx}`">
									<u-album class="mt-1" :urls="formatImgUrl(infoItem.Val)"
										@albumWidth="width => albumWidth = width" multipleSize="70" singleSize="70">
									</u-album>
								</view>
								<view v-else-if="infoItem.Type == 'map'" class="mt-2" :key="`${idx}_${sIdx}_${infoIdx}`">
									<view id="hotlineMap" ref="hotlineMapRef" :data-val="infoItem.Val"
										style="width:100%;height:200px;"></view>
								</view>
								<view v-else class="flex justify-between align-baseline mb-1 info-item"
									:key="`${idx}_${sIdx}_${infoIdx}`">
									<view class="name mr-3">{{ infoItem.Name }}</view>
									<view class="flex justify-end align-center f-1" @click="handleInfoClick(infoItem, item)">
										<image class="icon" v-if="infoItem.Type == 'addr'" src="/static/work-order/ddr.png"
											mode="widthFix"></image>
										<image class="icon" v-if="infoItem.Type == 'tel'" src="/static/work-order/dh.png"
											mode="widthFix"></image>
										<view class="ml-1 val" :style="{ color: infoItem.ValColor ? infoItem.ValColor : '' }">
											{{ infoItem.Val }}
										</view>
									</view>
								</view>
							</template>
						</view>
					</template>
				</template>
			</view>
		</view>
		<view class="fixed-height"></view>
		<view class="fixed-btn">
			<u-button @click="goHistory" color="#007aff" shape="circle" text="查看历史记录"></u-button>
		</view>
		<view class="picker-btn" @click="showPicker = true">
			<u-icon name="list-dot" color="#fff" size="35"></u-icon>
		</view>
		<u-picker title="快捷导航" :show="showPicker" :columns="[orderDetails]" @cancel="showPicker = false"
			@confirm="handlePickerConfirm" keyName="TabName"></u-picker>

	</view>
</template>

<script>
import {
	getOrderView
} from "@/apis/workOrder.js";
import {
	obj2Url,
} from "@/util";
export default {
	data() {
		return {
			orderDetails: [],
			orderHeader: {},
			showConfirm: false,
			showPicker: false,
			currId: null,
			map: null,
		};
	},
	onLoad(option) {
		if (option.id) {
			this.currId = option.id
			console.log('option', option.id)
			this.fetchData()
		} else {
			this.$navigateBack(this.$router, 1)
		}

	},
	methods: {
		goHistory() {
			uni.navigateTo({
				url: '/pages/workOrder/historyOrder/historyOrder?tel=' + this.orderHeader.Tel
			})
		},
		async fetchData() {
			const res = await getOrderView({
				RepairId: this.currId
			})
			if (res.MsgCode != 0) return
			console.log('fetchData', res)
			this.orderHeader = res.data.Header
			this.orderDetails = res.data.Details
			this.randerPage()
		},
		randerPage() {
			setTimeout(() => {
				this.randerMap('21.8792,111.945602')

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.orderDetails = this.orderDetails.map((item, idx) => {
					console.log('-------', item)
					uni.createSelectorQuery().select(`.section_${item.TabName}_0`).boundingClientRect((
						res) => {
						item.top = res.top
						console.log('return', item)

					}).exec()
					return item
				})

			}, 100)
		},
		randerMap() {
			try {
				console.log(this.$refs.hotlineMapRef[0]['$attrs']['data-val'])
				const val = this.$refs.hotlineMapRef[0]['$attrs']['data-val']
				const valArr = val.split(',')
				if (valArr) {
					this.map = new qq.maps.Map("hotlineMap");
					this.markMap(this.map, valArr[0], valArr[1], "完工上报");
				}
			} catch (ex) {
				console.error("outer", ex);
			}


		},
		markMap(map, latitude, longitude, addr) {
			const center = new qq.maps.LatLng(latitude, longitude);
			map.zoomTo(13);
			map.panTo(center);
			const marker = new qq.maps.Marker({
				position: center,
				map: map
			});
			marker.setTitle(addr);
		},
		formatImgUrl(arrStr) {
			try {
				const arr = arrStr.split(',')
				return arr.map(item => {
					return 'http://img.help10000.com' + item
				})
			} catch (ex) {
				console.error("formatImgUrl", ex.message);
			}
		},
		handlePickerConfirm(item) {
			const tabTop = this.orderDetails[item.indexs[0]].top
			uni.pageScrollTo({
				scrollTop: tabTop,
				duration: 200
			});
			this.showPicker = false
		},
		handleInfoClick(info, item) {
			console.log('handleInfoClick', info)
			if (info.Type == "tel") {
				uni.makePhoneCall({
					phoneNumber: info.Val
				});
				return
			} else if (info.Type == 'addr') {
				uni.navigateTo({
					url: '/pages/repair/Normal/map?id=' + this.orderHeader.ID
				})
			} else {
				return
			}
		},
		scrolltolower() { },
	},
}
</script>

<style lang="scss">
.orderDetail {
	.top-bg {
		width: 100%;
		height: 120rpx;
		background-color: #007aff;
		z-index: -1;
	}

	.orderDetail-wrap {
		margin-top: -72rpx;

		.detail-info {
			color: #333;
			font-size: 26rpx;

			.order-headr {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;

				.status {
					background-color: $s-text-color-brand;
					border-top-left-radius: 20rpx;
					color: #fff;
					padding: 4rpx 18rpx;
					font-size: 20rpx;
					line-height: 28rpx;
					height: 28rpx;
					margin-right: -20rpx
				}

				.title {
					color: #333;
					font-size: 32rpx;
				}

				::v-deep .u-text {
					align-items: baseline !important
				}

				::v-deep .u-text__price {
					font-size: 12px !important;
					font-weight: normal !important;
				}
			}

			.info-container {
				font-size: 24rpx;
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;

				.header {
					position: relative;
					font-size: 32rpx;

					&:before {
						content: " ";
						position: absolute;
						left: 0;
						bottom: 0;
						right: 0;
						height: 1px;
						border-top: 1px solid #e5e5e5;
						color: #e5e5e5;
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
						-webkit-transform: scaleY(0.5);
						transform: scaleY(0.5);
					}
				}

				.info-item {
					position: relative;


					.name {
						color: $s-text-color-label
					}

					.icon {
						width: 30rpx;
					}

				}
			}

		}

	}

	.fixed-height {
		height: 130rpx;
		width: 100%;
	}

	.fixed-btn {
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background-color: #fff;

		::v-deep .u-button {
			width: calc(100% - 20rpx);
			margin: 0;
		}
	}

	.picker-btn {
		position: fixed;
		bottom: 140rpx;
		right: 30rpx;
		border-radius: 100px;
		padding: 6rpx;
		background-color: #007aff;
	}
}
</style>
